<template>
  <div class="Remote-download">
    <div class="Message-card">
      <button
        class="exit mdui-btn mdui-btn-icon"
        @click="exit()"
        >
            <i class="mdui-icon material-icons">exit_to_app</i>
        </button>
      <h2 class="title">请输入取件码</h2>
      <p class="tip"><small>发送文件后就会获得取件码</small></p>
      <input
        class=""
        type="text"
        v-model.number="shareCode"
        />
      <button
        class="download-btn mdui-color-blue-600 mdui-ripple"
        @click="download()"
      >
        提交
      </button>
    </div>
  </div>
</template>

<script>
import apiConfig from '@/api/apiConfig'
import mdui from 'mdui'

export default {
  data () {
    return {
      shareCode: null
    }
  },
  methods: {
    exit () {
      this.$emit('changPage', '')
    },
    download () {
      console.log('downloading...')
      if (this.shareCode === null) {
        mdui.snackbar({
          message: '请输入取件码',
          position: 'top',
          timeout: 2000
        })
        return
      }
      if (typeof (this.shareCode) !== 'number') {
        mdui.snackbar({
          message: '取件码不合法',
          position: 'top',
          timeout: 2000
        })
        this.shareCode = null
        return
      }
      const downloadTag = document.createElement('a')
      const downloadUrl = apiConfig.cloud.downloadShare(this.shareCode)
      downloadTag.href = downloadUrl
      downloadTag.style.display = 'none'
      downloadTag.target = '_blank'
      document.body.append(downloadTag)
      downloadTag.click()
      document.body.removeChild(downloadTag)
      this.shareCode = null
    }
  }
}
</script>

<style scoped>
:root {
  --theme-color: white;
  --bg-w-pure: rgb(65, 145, 245);
}
.download-btn {
  border-radius: 10px;
  cursor: pointer;
  display: block;
  font-size: 13.3px;
  height: 49px;
  margin-bottom: 20px;
  transition: background-color 0.25s, box-shadow 0.25s, color 0.25s,
    opacity 0.25s;
  width: 100%;
  max-width: 224px;
  /* ↑ button main */
  flex-grow: 2;
  background-color: var(--bg-w-pure);
  border: none;
  box-shadow: 0 5px 20px rgb(65 145 245 / 20%);
  color: var(--theme-color);
  outline: none;
}
.download-btn:active {
  background-color: var(--theme-color);
  box-shadow: 0 5px 30px rgb(65 145 245 / 50%);
  color: #fff;
}
.download-btn:hover {
  box-shadow: 0 5px 30px rgb(65 145 245 / 30%);
}
.exit {
  margin: 10px auto 10px 25px;
}
.Message-card {
  background: #ffffff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 1em;
  width: 80vw;
  max-width: 600px;
  margin: 0 auto 100px;
  padding: 5px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.Remote-download {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}
input {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  color: rgb(65, 145, 245);
  font-size: 35px;
  letter-spacing: 10px;
  margin-bottom: 20px;
  padding: 15px 15px 15px 25px;
  position: relative;
  text-align: center;
  transition: all 0.25s;
  width: 200px;
}
input:focus,
input:hover {
  border: none;
  outline: none;
  border-bottom: 2px solid rgb(65, 145, 245);
}
</style>
